<template>
  <div class="zb-container">
    <!-- 页面名称 -->
    <div class="header">
      <span>保障机构信息维护</span>
    </div>

    <!-- 内容 -->
    <el-container class="body">
      <!-- 树形 -->
      <el-aside width="200px" class="mainaside">
        <div class="user_tree">
          <!-- <el-tree
            class="el-tree"
            ref="treeRef"
            :props="treeprops"
            :data="treeDate"
            node-key="fId"
            check-strictly="true"
            @current-change="selectTable"
          /> -->

          <el-tree
            :data="treeDate"
            :props="treeprops"
            @node-click="handleNodeClick"
            @current-change="selectTable"
          />
        </div>
      </el-aside>
      <el-main class="mainmain">
        <!-- 新增按钮及查询 -->
        <div class="firsthe">
          <el-button type="primary" class="add" @click="onHandleAdd"
            >新增</el-button
          >
          <!-- 弹框内容 -->
          <el-dialog
            :width="900"
            :title="pageData.editDialogTitle"
            v-model="pageData.editDialogVisible"
            :close-on-click-modal="false"
            destroy-on-close
            custom-class="editDialog-class"
          >
            <edit
              :modifyObj="pageData.currentRow"
              :isAdd="pageData.isAdd"
              @Ok="onOk"
              @Cancel="() => (pageData.editDialogVisible = false)"
            />
          </el-dialog>
          <!-- 弹框内容结束 -->

          <!-- 模糊查询 -->
          <div class="search">
            <el-input
              v-model="pageData.queryParams.fOrgCode"
              placeholder="请输入保障机构编号"
              clearable
              ><template #prepend>保障机构编号</template>
            </el-input>

            <el-input
              v-model="pageData.queryParams.fOrgName"
              placeholder="请输入保障机构名称"
              clearable
              ><template #prepend>保障机构名称</template>
            </el-input>

            <el-button type="primary" plain @click="onHandleSearch"
              >搜索</el-button
            >
            <el-button type="warning" plain @click="onHandleReset"
              >重置</el-button
            >
          </div>
        </div>

        <!-- 主体表格 -->
        <el-row class="row-2">
          <!-- tabel -->
          <el-table
            :data="pageData.tableParams.tableData"
            style="width: 100%"
            border
            v-loading="pageData.tableParams.tableLoading"
          >
            <el-table-column
              fixed
              prop="fOrgCode"
              label="机构编号"
              min-width="120"
            />
            <el-table-column prop="fOrgName" label="机构名称" min-width="120" />
            <el-table-column
              prop="fRegAddress"
              label="注册地址"
              min-width="120"
            />
            <el-table-column
              prop="fCredential"
              label="资质等级"
              min-width="120"
            />
            <el-table-column prop="fContact" label="联系人" min-width="120" />
            <el-table-column
              prop="fPhone"
              label="联系电话"
              min-width="120"
            />
            <el-table-column
              prop="fIsInside"
              label="内部/外部"
              min-width="120"
            >
              <template #="v">
                <span>
                  {{v.row.fIsInside == 1 ? '内部' : '外部'}}
                </span>
              </template>
            </el-table-column>

            <el-table-column
              prop="fCreateUserName"
              label="录入人员"
              min-width="120"
            />
            <el-table-column
              prop="fCreatorTime"
              label="录入时间"
              min-width="120"
            />
            <el-table-column prop="fState" label="状态">
              <template #="v">
                <span>{{
                  v.row.fState == 0
                    ? "草稿"
                    : v.row.fState == 10
                    ? "审核中"
                    : v.row.fState == 20
                    ? "作废/删除"
                    : "审核通过"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="fRemark" label="备注" width="600" />
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="{ row }">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="onHandleEdit(row)"
                  >编辑</el-button
                >

                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="onHandleDel(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页查询 -->
          <el-col :span="24">
            <el-pagination
              style="margin-top: 20px"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="pageData.tableParams.pageSizeOptions"
              :current-page="pageData.queryParams.page"
              :page-size="pageData.queryParams.pageSize"
              :total="pageData.tableParams.totalCount"
              @current-change="onHandleCurrentChange"
              @size-change="onHandleSizeChange"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// import { reactive } from "vue";
const reload = inject("reload");
import { onMounted, nextTick, reactive, ref, inject } from "vue";
import {
  select_jg,
  delete_jg,
} from "@/api/basic/safeguardorganization";
import edit from "./edit.vue";
import utils from "@/common/utils";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";

export default {
  components: { edit },

  setup() {
    onMounted(() => {
      // treeList();
      getTableData();
    });
    // 刷新
    const reload = inject("reload");

    const paramTable = ref();

    const pageData = reactive({
      queryParams: {
        fOrgCode: "",
        fOrgName: "",
        page: 1,
        pageSize: 10,
        fOrgCategory: 0,
      },
      tableParams: {
        tableLoading: false,
        tableHeight: 0,
        pageSizeOptions: ["10", "15", "30", "50", "100", "200"],
        totalCount: 0,
        tableData: [],
      },
      currentRow: {},
      editDialogTitle: "保障机构",
      editDialogVisible: false,
      isAdd: false,
    });

    // 获取树列表
    // const treeRef = ref("");
    const treeDate = reactive([
      {
        label: "保障机构",
        value: 0,
        children: [
          {
            label: "供应商",
            value: 50,
            children: [],
          },
          {
            label: "生产商",
            value: 60,
            children: [],
          },
          {
            label: "维修厂",
            value: 70,
            children: [],
          },
        ],
      },
    ]);
    const treeprops = {
      children: "children",
      label: "label",
    };
    const handleNodeClick = (val) => {
      // console.log("first", val);
    };
    // const treeList = () => {
    //   select_equip().then((res) => {
    //     // console.log("查看装备分类的res:", res.data);
    //     // treename.push(...res.data);
    //     treeDate.push(...res.data);
    //     // console.log("查看treeDate:", treeDate);
    //   });
    // };
    function selectTable(res) {
      console.log("tree的res", res);
      pageData.queryParams.fOrgCategory = res.value;
      // console.log(
      //   "pageData.queryParams.fOrgCategory",
      //   pageData.queryParams.fOrgCategory
      // );
      getTableData();
    }

    // 分页查询
    const onHandleCurrentChange = (e) => {
      console.log("e", e);
      pageData.queryParams.page = e;
      getTableData();
    };
    const onHandleSizeChange = (e) => {
      pageData.queryParams.page = 1;
      pageData.queryParams.pageSize = e;
      getTableData();
    };
    // 获取装备信息表格数据
    const getTableData = () => {
      pageData.currentRow = {};
      pageData.tableParams.tableLoading = true;
      select_jg(pageData.queryParams)
        .then((res) => {
          console.log("res", res);
          // console.log('first',typeof pageData.formData.fPIsSerial)  -1
          pageData.tableParams.tableData = res.list;
          // pageData.tableParams.totalCount = res.totalCount;
          // pageData.tableParams.totalCount = res.data.list.length;
          if (res.list != null) {
            pageData.tableParams.totalCount = res.list.length;
          } else {
            pageData.tableParams.totalCount = res.totalCount;
          }
          pageData.tableParams.tableLoading = false;
        })
        .catch((error) => {
          ElMessage.error(error.message || "请求出错");
          pageData.tableParams.tableLoading = false;
        });
    };
    // 模糊查询
    const onHandleSearch = () => {
      getTableData();
    };
    // 重置
    const onHandleReset = () => {
      pageData.queryParams.fOrgCode = "";
      pageData.queryParams.fOrgName = "";
      getTableData();
    };

    // 新增
    const onHandleAdd = () => {
      pageData.isAdd = true;
      pageData.editDialogTitle = "新增保障机构信息";
      pageData.editDialogVisible = true;
    };
    const onOk = ({ isAdd, retObj }) => {
      pageData.isAdd = isAdd;
      pageData.editDialogVisible = false;
      getTableData();
    };

    // 编辑
    const onHandleEdit = (row) => {
      console.log("行", row);
      pageData.currentRow = {};
      if (utils.isEmpty(row)) {
        ElMessage.warning("请选中需要操作的数据行");
        return;
      }

      pageData.currentRow = row;
      pageData.editDialogVisible = true;
      pageData.editDialogTitle = "编辑保障机构信息";

      pageData.isAdd = false;
    };

    // 删除
    const onHandleDel = (row) => {
      pageData.currentRow = {};
      console.log(row);
      if (utils.isEmpty(row.fId)) {
        ElMessage.warning("请选中需要操作的数据行");
        return;
      }
      if (row.fState === 20) {
        ElMessage.error("该保障机构信息已被删除，不可重复删除");
      } else {
        ElMessageBox.confirm("是否确定删除该机构信息", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            const loading = ElLoading.service({
              lock: true,
              background: "rgba(0, 0, 0, 0.7)",
            });
            delete_jg(row.fId)
              .then((res) => {
                loading.close();
                ElMessage.success("删除成功");
                getTableData();

              })
              .catch((error) => {
                loading.close();
                ElMessage.error(error.message || "请求出错");
              });
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "删除失败",
            });
            return;
          });
      }
    };

    //
    const kaiguan = (val) => {
      // console.log(typeof pageData.formData.fPIsSerial);
      console.log("开关val", val);
      // pageData.formData.fPIsSerial = val;

      // pageData.formData.fPIsSerial = Number(val);
      // console.log("object111", pageData.formData.fPIsSerial);
      // console.log(typeof pageData.formData.fPIsSerial);
    };

    return {
      paramTable,
      pageData,
      // treeRef,
      treeDate,
      // treeList,
      treeprops,
      handleNodeClick,
      selectTable,
      onHandleCurrentChange,
      onHandleSizeChange,
      getTableData,
      onHandleSearch,
      onHandleReset,
      onHandleAdd,
      onOk,
      onHandleEdit,
      onHandleDel,
      reload,
      kaiguan,
    };
  },
};
</script>

<style lang="scss" scoped>
.zb-container {
  padding: 0;
  margin: 0;
  .header {
    width: 100%;
    background-color: white;
    user-select: none;

    text-align: left;
    span {
      line-height: 50px;
      font-size: 18px;
      font-weight: 700;
      text-align: left;
      margin-left: 20px;
    }
  }

  .body {
    margin-top: 20px;
    background-color: white;
    height: 77vh;
    // 树形下拉框
    .mainaside {
      background-color: rgb(230, 240, 250);
      border-right: 1px solid #ccc;
      .user_tree {
        .el-tree {
          border-bottom: 1px solid #ddd;
        }
      }
    }
    // 内容表格
    .mainmain {
      .firsthe {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .search {
          display: flex;
          align-items: center;
          user-select: none;

          .el-input {
            margin-right: 20px;
          }
        }
      }
    }
  }
}
</style>

<style>
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.el-dialog .el-dialog__header {
  padding: 20px 0;
  padding-left: 20px;
  margin: 0;

  word-break: break-all;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.el-select {
  width: 100%;
  border: none;
  border-radius: 0;
}
.el-select .el-option {
  width: 100%;
  border: none;
  border-radius: 0;
}
</style>
